<template>
    <div class="agreement">
        <div class="menu">
            <div class="menu-title">用户协议</div>
            <div
                v-for="(item, index) in menuList"
                :key="index"
                class="menu-item"
                :class="{ 'menu-item-avatar': item.index == ragIndex }"
                @click="cutChange(item)"
            >
                {{ item.name }}
            </div>
        </div>
        <div class="agreement-right">
            <template>
                <div v-html="userAgreement"></div>
            </template>
        </div>
    </div>
</template>

<script>
import { agreementApi } from "@/assets/api/userCenterApi";
import { goTopSmooth } from "@/assets/utils/utils";

export default {
    name: "UserAgreement",
    layout: "home",
    head() {
        return {
            title: "用户协议-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,用户协议",
                },
            ],
        };
    },
    data() {
        return {
            paramsPath: "Index",
            menuList: [
                {
                    name: "用户协议",
                    reqTag: "user_agreement",
                    index: "0",
                    checked: true,
                },
                {
                    name: "隐私协议",
                    reqTag: "privacy_agreement",
                    index: "1",
                    checked: false,
                },
                {
                    name: "会员协议",
                    reqTag: "vip_deal",
                    index: "2",
                    checked: false,
                },
                {
                    name: "问答协议",
                    reqTag: "wenda_agreement",
                    index: "3",
                    checked: false,
                },
            ],
            userAgreement: "",
            ragIndex: "0",
            typeName: "user_agreement",
        };
    },
    mounted() {
        console.log(this.$route.query.index);
        if (this.$route.query.index !== undefined) {
            this.ragIndex = this.$route.query.index;
            console.log(this.ragIndex);
            this.typeName = this.menuList[Number(this.ragIndex)].reqTag;
            console.log("难道没有走这个嘛");
            console.log(this.typeName);
        } else {
            this.ragIndex = "0";
            this.typeName = "user_agreement";
        }
        this.getAgreement();
        goTopSmooth();
    },
    computed: {},
    watch: {},
    methods: {
        cutChange(item) {
            this.ragIndex = item.index;
            this.typeName = item.reqTag;
            this.getAgreement();
        },

        async getAgreement() {
            const res = await agreementApi({
                name: this.typeName,
            });
            if (res.code == 1) {
                this.userAgreement = res.data;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.agreement {
    display: flex;
    align-items: flex-start;
    width: 1200px;
    margin: 20px auto 60px;
    justify-content: space-between;
    border-radius: 4px;
}
.menu {
    background-color: #ffffff;
    width: 225px;
    .menu-title {
        height: 66px;
        width: 100%;
        border-bottom: solid 1px #e0e0e0;
        font-size: 18px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        font-weight: 500;
        color: #333;
    }
    .menu-item {
        border-left: 3px solid #ffffff;
        font-size: 15px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #333333;
        height: 50px;
        line-height: 50px;
        padding-left: 28px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
            background-color: #f2f8ff;
            border-left-color: #f2f8ff;
        }
    }

    .menu-item-avatar {
        color: #1c87f3;
        border-left-color: #1c87f3 !important;
        background-color: #f2f8ff;
    }
}
.agreement-right {
    width: 960px;
    min-height: 480px;
    background: #fff;
    margin-left: 20px;
    padding: 30px;
}
</style>